<template>
  <div class='dex'>
    <div class='tu'>
      <img src="../assets/index.png" alt="">
      <div class='menu'>
        <h3>医联体平台</h3>
        <div class='menu_bott'>
          <h4>医生登陆</h4>
          <div class='menu_box'>
            <form action="">
              <input type="text" placeholder="手机号" v-model="user.username" v-on:blur="changeCount(user.username)">
              <input type="password" v-model="user.password" placeholder="密码">
              <button v-on:click="logn()">登陆</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <p></p>
  </div>
</template>
<script>
  export default {
    data:function(){
      return{
        user: {
          grant_type: 'password',
          username: '',
          password: '',
          client_secret: '20170101',
          client_id: 'DOCTOR',
        },
        rules: {
          username: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '手机号必须为11位数字' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符' },
          ],
        },
        loading: false,
      }
    },
    methods:{
      //輸入號碼驗證
      changeCount:function(username){
        var phoneRule=/^1[3,4,5,7,8]\d{9}$/
        if(!phoneRule.test(username)){
          console.log('手机号码格式不正确');
        }else{
          console.log('輸入正確')
        }
      },
      //登陸驗證
      logn:function( ){
        var url='/api/uaa/oauth/token';
        var user={
          grant_type: 'password',
          // username: '13813813800',
          username:this.user.username,
          // password: '123456',
          password:this.user.password,
          client_secret: '20170101',
          client_id: 'DOCTOR'
        }
        console.log(url);
        this.$http.post(url,user,{emulateJSON:true}).then(function(res){
          console.log(res)
          // 把這個存起來，用於判斷用戶是否登陸
          localStorage.setItem('access_token',res.body.access_token)          
          localStorage.setItem('user',JSON.stringify(res.body))
          this.$router.push({ name:"Expert" })
        },function(){
          alert('用戶名或者密碼錯誤')
        })
        // this.$router.push({ name:"Experts" });
      }
    }
  }


//  function longPost(){
//        var url='/api/uaa/oauth/token';
//        var user={
//          grant_type: 'password',
//          username: '13813813800',
//          password: '123456',
//          client_secret: '20170101',
//          client_id: 'DOCTOR'
//        }
//    console.log(user);
//        this.$http.post(url,user,{emulateJSON:true}).then(function(res){
//          console.log(res)
//        })
//        console.log(1)
//  }
</script>


<style>
  .dex{width:100%;height:100%;background:#6A84D9;}
  .tu{width:1200px;height:100%;background-color:#6A84D9;margin:60px auto;position:relative; }
  .menu{width:300px;height:400px;position:absolute;right:100px;top:50px;}
  .menu h3{color:white;text-align:center;margin-bottom:40px;}
  .menu_bott{width:300px;height:300px;background:#D3E2FF;border-radius:20px;position:relative;}
  .menu_bott h4{color:#7D98DB;position:absolute;top:10px;left:30px;}
  .menu_box {position:absolute;top:40px;}
  .menu_bott input{border:0;width:260px;height:40px;border-radius:5px;border:1px solid #ccc;margin-left:20px;margin-top:20px;outline:none;font-size:16px;}
  .menu_bott button{width:260px;height:40px;background:#6886D4;color:white;border-radius:10px;margin-left:20px;margin-top:50px;outline:none}
</style>
